<template>
  <div>
    <h3>list研究</h3>
    <div class="box">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :immediate-check="check"
          @load="onLoad"
        >
          <div v-for="item in list" :key="item">{{ item }}</div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      refreshing: false,
      check: false,
      list: [], //数据
      loading: false, //加载状态
      finished: false, //加载完成
    };
  },
  created() {
    this.list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  },
  methods: {
    onRefresh() {
      //下拉刷新
      this.list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      this.refreshing = false;
      this.finished=false;
    },
    onLoad() {
      //上拉加载
      console.log("碰到底部");
      setTimeout(() => {
        for (var i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        this.loading = false; //不然不能进行下一次加载
        if (this.list.length >= 50) {
          this.finished = true;
        }
      }, 500);
    },
  },
};
</script>

<style scoped>
.box {
  height: 180px;
  overflow: hidden;
  overflow-y: scroll;
}
</style>
